﻿<!DOCTYPE html>
<html ng-app="directiveApp">
<head>
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script type="text/ng-template" id="scopeTemplate">
        <div class="panel-body">
            <p>Name: <input ng-model="data.name" /></p>
            <p>City: <input ng-model="city" /></p>
            <p>Country: <input ng-model="country" /></p>
        </div>
    </script>
    <script type="text/javascript">
        angular.module("directiveApp", [])
            .directive("scopeDemo", function () {
                return {
                    template: function () {
                        return angular.element(
                        document.querySelector("#scopeTemplate")).html();
                    },
                    scope: {}       // scope置为空对象，将取消一切继承，每个directive独立维护各自的scope
                }
            })
            .controller("scopeCtrl", function ($scope) {
                $scope.data = { name: "Adam" };     // 即使定义了data, city，directive中也不能共享这些数据
                $scope.city = "London";
            });
    </script>
</head>
<body>
    <div class="panel panel-default" ng-controller="scopeCtrl">
        <div class="panel-body" scope-demo></div>
        <div class="panel-body" scope-demo></div>
    </div>
</body>
</html>
